<%@page import="java.util.UUID"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/common/taglib.jsp"%>
<%
    String uuid = UUID.randomUUID().toString();
    request.setAttribute("uuid", uuid);
%>
<div class="box">
	<div class="box-body" >
		<form id="LeaveMessageForm_${uuid}">
		<input type="hidden" name="pid" value="-1" />
		<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 5px;">
			<tbody>
				<tr style="height: 60px;">
					<td align="right" width="100px">发表留言：</td>
					<td><textarea name="content" style="width:100%;height: 80px;"></textarea></td>
					<td align="center" width="80px">
						<input type="checkbox" checked='checked' name="isun">匿名
						<button id="submitBtn_${uuid }" type="button" class="btn btn-primary navbar-btn">发表</button>
					</td>
				</tr>
			</tbody>
		</table>
		</form>
		<div id="LeaveMessagePageList_${uuid }"></div>    		
	</div>
</div>
<script type="text/javascript">
$(function(){
	
	loadLeaveMessageList('-1',1);
	
	$("#submitBtn_${uuid}").click(function(){
		var form = $("#LeaveMessageForm_${uuid}");
		var content = form.find("textarea[name=content]").val();
		var isun = 0;
		if(form.find("input[name=isun]")[0].checked){
			isun=1;
		}
		if($.trim(content).length>0){
			LeaveMessageFormSubmit(form.find("input[name=pid]").val(),content,isun,function(data){
				form.find("textarea[name=content]").val("");
				loadLeaveMessageList('-1',1);
			});
		}
	});
});

/**
 * 初始化评论区域
 */
function loadLeaveMessageList(pid,pageNumber){
	$.post(ctx+"/PF/leaveMsg/select.do",{
		pid:pid,
		pageSize:20,
		pageNumber:pageNumber
	},function(data){
		if(data.rows.length>0){
			var list = $("#LeaveMessagePageList_${uuid }");
			list.empty();
			for(var i=0; i<data.rows.length; i++){
				var row = data.rows[i];
				var upBtnHtml = "";
				if(row.isUp==0){
					upBtnHtml = "<span><a name='up' i='"+row.upTotal+"' href='javascript:LeaveMessageUp(\""+row.id+"\",0)' title='挺一下' class='glyphicon glyphicon-thumbs-up'>("+row.upTotal+")</a>"+
					"&nbsp;<a name='down' i='"+row.downTotal+"' href='javascript:LeaveMessageUp(\""+row.id+"\",1)' title='踩一下' class='glyphicon glyphicon-thumbs-down'>("+row.downTotal+")</a></span>";
				}else{
					upBtnHtml = "<span title='你已经点评过此楼' class='glyphicon glyphicon-thumbs-up'>("+row.upTotal+")</span>"+
								"&nbsp;<span title='你已经点评过此楼' class='glyphicon glyphicon-thumbs-down'>("+row.downTotal+")</span>";
				}
				var html = "<table id='{0}' name='mediaItem' border='0' class='table' style='margin-bottom:5px;'><tbody>"+
				   "<tr><td width='70px'><img src='/res/images/user-def.jpg'><h6 class='text-center'>{1}</h6></td><td>{2}</td></tr>"+
				   "<tr><td colspan='2' class='text-right text-muted' style='border-top:none;'>"+
				    upBtnHtml+
				   	"&nbsp;{3}楼&nbsp;{4}&nbsp;"+
				   	"<a name='replyBtn' href='javascript:showLeaveMessageReplyComment(\""+row.id+"\")'>回复{5}</a>"+
				   	"<a name='hideReplyBtn' class='bg-success' style='padding:5px 10px;display:none;' href='javascript:hideLeaveMessageReplyComment(\""+row.id+"\")'>收起回复</a>"+
				   	"<div name='ReplyCommentDiv' class='bg-success' style='padding: 20px 20px 5px 20px;display:none;'></div>"+
				   "</td></tr>"+
				   "</tbody></table>";
				list.append(html.format(row.id,(row.isun==1?'匿名侠':row.createUserName),row.contentStr,row.floor,row.createTimeStr,"("+row.children+")"));
				if(row.children>0){
					loadLeaveMessageReplyList(row.id);
				}
			}
			if(data.pageCount>1){//有分页，显示分页控件 active
				var html = "<nav class='text-center'><ul class='pagination'>";
				for(var i=1; i<=data.pageCount; i++){
					html += "<li class='{0}'><a href='javascript:loadLeaveMessageList(\"-1\","+i+")'>"+i+"</a></li>";
					if(data.curPage==i){
						html = html.format("active");
					}else{
						html = html.format("");
					}
				}
				html += "</li></ul></nav>";
				if(data.curPage>1){
					$("#LeaveMessageForm_${uuid} textarea[name=content]").focus();
				}
				list.append(html);
			}
		}
	},'json');
}

/**
 * 加载回复评论列表
 */
function loadLeaveMessageReplyList(pid){
	$.post(ctx+"/PF/leaveMsg/select.do",{
		pid:pid,
		pageSize:20,
		pageNumber:1
	},function(data){
		if(data.rows.length>0){
			var tb = $("#"+pid);
			var com = tb.find("div[name=ReplyCommentDiv]");
			for(var i=0; i<data.rows.length; i++){
				var row = data.rows[i];
				var html = getLeaveMessageReplyItem();
				com.append(html.format((row.isun==1?'匿名侠':row.createUserName),row.contentStr,row.createTimeStr,pid));
			}
			com.append("<div class='text-right' onclick='showLeaveMessageReplyComment(\""+pid+"\")' style='margin:10px 0;'><button type='button' class='btn btn-default'>我也说一句</button></div>");
			tb.find("a[name='replyBtn']").hide();
			tb.find("a[name='hideReplyBtn']").show();
			com.show();
		}
	},'json');
}

function getLeaveMessageReplyItem(){
	return "<div name='replyCMItem' class='media'>"+
	   "<a class='media-left' href='#'><img src='/res/images/user-def-s.jpg'></a>"+
	   "<div class='media-body text-left'><a href='#' name='userName'>{0}：</a>{1}</div>"+
	   "<div class='media-bottom text-right' style='font-size:10px;'>{2}&nbsp;<a href='javascript:showLeaveMessageReplyComment(\"{3}\",1)' class='text-muted'>回复</a></div>"+
   "</div>";
}

/**
 * 发表评论
 */
function LeaveMessageFormSubmit(pid,content,isun,callFun){
	if($.trim(content)==''){
		webUtils.alert("请填写评论内容！");
		return;
	}
	$.post(ctx+"/PF/leaveMsg/add.do",{
		pid:pid,
		isun:isun,
		content:content
	},function(data){
		webUtils.alert(data.msg);
		if(data.success){
			callFun.call(null,data);
		}
	},'json');
}

/**
 * 发表回复评论
 */
function ReplyCommentSubmit(pid){
	var tb = $("#"+pid);
	var com = tb.find("div[name=ReplyCommentDiv]");
	var content = com.find("textarea[name='content']");
	var isun = 0;
	if(com.find("input[name=isun]")[0].checked){
		isun=1;
	}
	LeaveMessageFormSubmit(pid,content.val(),isun,function(data){
	   content.val("");
	   var row = data.obj;
	   var html = getLeaveMessageReplyItem().format((row.isun==1?'匿名侠':row.createUserName),row.contentStr,row.createTimeStr,pid);
	   var replyList = com.find("div[name='replyCMItem']");
	   if(replyList.length>0){
	        replyList.last().after(html);
	   }else{
		   content.parent().before(html);
		   content.parent().before("<div class='text-right' onclick='showLeaveMessageReplyComment(\""+pid+"\")' style='margin:10px 0;'><button type='button' class='btn btn-default'>我也说一句</button></div>");
		   var replyCount = com.find("div[name='replyCMItem']").length;
		   com.find("a[name='replyBtn']").html("回复("+replyCount+")");
	   }
	});
}

/**
 * 展开回复
 */
function showLeaveMessageReplyComment(id,code){
	var preWin = $("#LeaveMessagePageList_${uuid }").find("table[name='mediaItem']").find("td div[name='ReplyCommentDiv'] textarea[name='content']");
	if(preWin.length>0){
		$.each(preWin,function(){
			var preId = $(this).parents("table").attr("id");
			hideLeaveMessageReplyComment(preId,1);
		});
	}
	var tb = $("#"+id);
	tb.find("a[name='replyBtn']").hide();
	tb.find("a[name='hideReplyBtn']").show();
	var com = tb.find("div[name='ReplyCommentDiv']");
	var replyContentDiv = com.find("div[name='replyContentDiv']");
	if(replyContentDiv.length==0){
		var html = "<div name='replyContentDiv' class='media'><form>"+
						"<textarea name='content' style='width: 100%;margin: 0 auto;height: 60px;margin-top: 15px;'></textarea>"+
						"<div><input type='checkbox' checked='checked' name='isun'>匿名&nbsp;&nbsp;&nbsp;<button type='button' onclick='ReplyCommentSubmit(\""+id+"\")' class='btn btn-primary navbar-btn'>发表</button></div>"+
					"</form></div>";
		com.append(html);
	}else{
		replyContentDiv.show();
	}
	var contentObj = com.find("textarea[name='content']");
	contentObj.val("");
	if(code==1){//回复某条评论的回复
		var userName = com.find("a[name='userName']").html();
		contentObj.val("回复 "+userName);
	}
	com.show();
	contentObj.focus();
}

/**
 * 收起回复
 */
function hideLeaveMessageReplyComment(id,i){
	var tb = $("#"+id);
	var com = tb.find("div[name='ReplyCommentDiv']");
	var replyCount = com.find("div[name='replyCMItem']").length;
	if(replyCount>0 && i==1){
		com.find("div[name='replyContentDiv']").hide();
	}else{
		tb.find("a[name='replyBtn']").show();
		tb.find("a[name='hideReplyBtn']").hide();
		com.hide();
		com.find("div[name='replyContentDiv']").hide();
	}
}

function LeaveMessageUp(mid,state){
	$.post(ctx+"/PF/leaveMsg/up.do",{
		mid:mid,
		state:state
	},function(data){
		if(data.success){
			var tb = $("#"+mid);
			var parent = tb.find("a[name=up]").parent();
			var upTotal = tb.find("a[name=up]").attr('i');
			var downTotal = tb.find("a[name=down]").attr('i');
			if(state==0){
				upTotal = parseInt(upTotal)+1;
			}else{
				downTotal = parseInt(downTotal)+1
			}
			var html = "<span title='你已经点评过此楼' class='glyphicon glyphicon-thumbs-up'>("+upTotal+")</span>"+
			"&nbsp;<span title='你已经点评过此楼' class='glyphicon glyphicon-thumbs-down'>("+downTotal+")</span>";
			parent.empty();
			parent.html(html);
		}
	},'json');
}
</script>